<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="./css/coudan.css">
    <link rel="stylesheet" href="public/css/public.css">
    <link rel="stylesheet" href="fonts/css/font-awesome.min.css">
    <title>Document</title>
    <style>
        footer{
            font-size: .3rem;
        }
    </style>
</head>

<body>
    <!-- 头部 -->
    <header>
        <a href="index.html" class="back"></a>
        <div class="tlt">
            <h3>凑单品</h3>
        </div>
    </header>
    <!-- 选择器 -->
    <section class="selector">
        <div class="allSelect">
            <ul class="dorpdown">
                <li class="tap_sort">
                    <a href="javascript:;">
                        <input type="hidden" value="0"> 京东
                    </a>
                    <i class="fa fa-caret-down"></i>
                </li>
                <li class="tap_price">
                    <a href="javascript:;">
                        <input type="hidden" value="0">华北</a>
                    <i class="fa fa-caret-down"></i>
                </li>
                <li class="tap_cat">
                    <a href="javascript:;">全部价格</a>
                    <i class="fa fa-caret-down"></i>
                </li>
            </ul>
            <div class="search">
                <i class="">
                    <img src="images/search.png" alt="">
                </i>
            </div>
            <!-- 各种下拉 -->

            <div class="drop">
                <!-- 店铺 -->
                <div class="popbox popsort">
                    <ul class="sort check">
                    </ul>
                </div>
                <!-- 地区 -->
                <div class="popbox popprice">
                    <ul class="price check">

                    </ul>
                </div>
                <!-- 价格 -->
                <div class="popbox popcat">
                    <ul class="cat check">
                        <li class="active">
                            <a href="#">全部价格</a>
                            <span class="fa fa-check"></span>
                        </li>
                        <li>
                            <a href="#">1~3元</a>
                            <span></span>
                        </li>
                        <li>
                            <a href="#">3~5元</a>
                            <span></span>
                        </li>
                        <li>
                            <a href="#">5~10元</a>
                            <span></span>
                        </li>
                        <li>
                            <a href="#">10~15元</a>
                            <span></span>
                        </li>
                        <li>
                            <a href="#">15元以上</a>
                            <span></span>
                        </li>
                    </ul>
                </div>
                <!-- 搜索 -->
                <div class="drop_search">
                    <div class="top">
                        <input type="search" placeholder="搜索您想要的凑单品">
                        <i class="fa fa-search"></i>
                        <a href="#">搜索</a>
                    </div>
                    <div class="center">
                        <h3>排序</h3>
                        <ul class="clearfix rank">
                            <li>
                                <a href="#">销量</a>
                            </li>
                            <li class="click">
                                <a href="#" class=" ">价格
                                    <i class="fa fa-long-arrow-up"></i>
                                </a>
                            </li>
                            <li>
                                <a href="#">价格
                                    <i class="fa fa-long-arrow-down"></i>
                                </a>
                            </li>
                        </ul>
                    </div>
                    <div class="center bottom">
                        <h3>分类</h3>
                        <ul class="clearfix">
                            <li>
                                <a href="#" class="click">全部</a>
                            </li>
                            <li>
                                <a href="#">家居</a>
                            </li>
                            <li>
                                <a href="#">办公</a>
                            </li>
                            <li>
                                <a href="#">个户</a>
                            </li>
                            <li>
                                <a href="#">数码</a>
                            </li>
                            <li>
                                <a href="#">食品</a>
                            </li>
                            <li>
                                <a href="#">母婴</a>
                            </li>
                            <li>
                                <a href="#">服饰</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>

        </div>
    </section>
    <!-- 主体内容 -->
    <section class="content">
    </section>
    <!-- 底部部分开始 -->
    <footer>
        <div class="foot_tit">
            <strong>品牌排行</strong>
            <i class="iconfont">&#xe72f;</i>
        </div>
        <div class="foot_user">
            <a href="javascript:;" class="foot_login">登录</a>
            <a href="javascript:;" class="foot_register">注册</a>
            <a href="#" class="foot_return">
                <i class="iconfont">&#xe648;</i>
                返回顶部
            </a>
        </div>
        <div class="foot_text">
            <div class="text_box">
                <span class="text_sp">手机APP下载</span>
                <span class="text_sp">慢慢买手机版</span>
                <span class="text_sp">--掌上比价平台</span>
            </div>
            <p>m.manmanbuy.com</p>
        </div>
    </footer>
    <!-- 底部部分结束 -->
</body>
<script src="lib/zepto/zepto.js"></script>
<script src="lib/zepto/lazyload.js"></script>
<script src="lib/template/template-web.js"></script>

<script src="js/coudan.js"></script>

<!-- rem -->
<script>
    $(function () {
        setHTML();
        // 为了在pc端更好的去调试
        onresize = function () {
            setHTML();
        }

        function setHTML() {
            // 基础值
            var baseVal = 100;
            // 设计稿的宽度
            var pageWidth = 640;
            // 要适配的屏幕的宽度?
            var screenWidth = document.querySelector("html").offsetWidth;
            // 要设置的fontsize
            var fontsize = screenWidth * baseVal / pageWidth;
            // 设置到html标签的中
            document.querySelector("html").style.fontSize = fontsize + "px";
        }
    })
</script>
<!-- rem -->
   
</html>


<!-- 主体内容模板 -->
<script type="text/template" id="content">
    {{each data value}}
    <div class="item">
        <a href="#">
            <img class="test-lazyload" src="images/lazy.gif" data-original="{{value.productImg}}" alt="">
            <p>{{value.productName}}</p>
            <span>{{value.productPrice}}</span>
        </a>
    </div>
    {{/each}}
</script>
<!-- 主体内容模板 -->

<!-- 地区模板 -->
<script type="text/template" id="temp_price">
    {{each data value}}
    <li>
        <a href="#">
            <input type="hidden" value="{{ value.areaId }}"> {{value.areaName}}
        </a>
        <span class="fa"></span>
    </li>
    {{/each}}
</script>
<!-- 地区模板 -->

<!-- 店铺模板 -->
<script type="text/template" id="temp_sort">
    {{each data value}}
    <li>
        <a href="#">
            <input type="hidden" value="{{ value.shopId }}"> {{value.shopName}}
        </a>
        <span class="fa"></span>
    </li>
    {{/each}}
</script>
<!-- 店铺模板 -->